<template>
  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex==='pictureUrl'">
        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
        <img v-else :src="getImgView(text)" :preview="record.pictureUrl" alt="" class="anty-img-wrap" width="100px" height="30px"/>
      </template>
    </template>

    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增菜单</a-button>
      <a-button type="primary" preIcon="ic:round-expand" @click="handleSameMenu">同步到微信</a-button>
    </template>

    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>
  <!-- table区域-end-->
  <MenuModal @register="registerMenuModal" @success="reload"></MenuModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, toRaw } from "vue";
import { BasicTable, TableAction, BasicColumn } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { list, del, sameMenu } from "/@/views/weixin/menu/menu.api";
import { useMessage } from "/@/hooks/web/useMessage";
import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';

import MenuModal from './MenuModal.vue';

const { createMessage: $message } = useMessage();
//初始化 -------------------------------------------------------------

//订单列表 - 表头
const columns: BasicColumn[] = [
  { title: "菜单名称", align: "left", dataIndex: "name", width: 100},
  {
    title: '图片',
    dataIndex: 'pictureUrl',
    width: 150,
  },
  { title: "菜单类型", align: "center", dataIndex: "type", width: 100, customRender: ({ text }) => {
      let re = '';
      if (text === 'click') {
        re = '消息触发类';
      } else if (text === 'view') {
        re = '网页链接类';
      }
      return re;
    },},
  { title: "顺序", align: "center", dataIndex: "orders", width: 100},
]

// 列表页面公共参数、方法
const {prefixCls, tableContext, onImportXls} = useListPage({
  designScope: 'weixin-menu-list',
  tableProps: {
    api: list,
    columns: columns,
    size: 'small',
    pagination: false,
    isTreeTable: true,
    showTableSetting: false,
    showIndexColumn: true,    //行号
    showActionColumn: true,
    useSearchForm: false,
    resizeHeightOffset: 40,
    showSummary: false,
    defaultExpandAllRows: true,
    actionColumn: {
      width: 50
    }
  },
})

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '编辑',
      icon: "ant-design:form-outlined",
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '删除',
      color: 'error',
      icon: 'ant-design:rest-twotone',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}

//注册table数据
const [registerTable, {reload, expandAll, collapseAll}] = tableContext

//新增订单
const [registerMenuModal, {openModal: openMenuModal}] = useModal();

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

//双击行
function handleDblclick(record) {
  //alert("handleDblclick" + record.id);
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

function handleCreate() {
  openMenuModal(true, { isUpdate: false });
}

function handleEdit(record: Recordable) {
  //let record = {id: selectRows.id}
  openMenuModal(true, { isUpdate: true, record });
}

/**
 * 删除事件
 */
async function handleDelete(record: Recordable) {
  //let record = {id: selectRows.id}
  await del(record, reload);
}

/**
 * 菜单同步到微信
 */
function handleSameMenu(){
  sameMenu().then((res) => {
    if (res.success) {
      $message.success("操作成功！");
    } else {
      $message.error(res.message);
    }
  })
}

/**
 * 获取预览图片
 */
 function getImgView(text) {
  if (text && text.indexOf(',') > 0) {
    text = text.substring(0, text.indexOf(','));
  }
  return getFileAccessHttpUrl(text);
}
</script>
<style scoped>

</style>
